<template>
	<div class="load">
		<mt-loadmore :top-method="loadTop" ref="loadmore" :auto-fill="true" :topDistance="50">
			<div class="recommend" :style="{'-webkit-overflow-scrolling': scrollMode}">
	
				<!--other-->
				<section class="r_list" v-for="item in $store.state.s_newList" v-if="video!=='video'">
					<!--三图-->
					<div v-if="item.image_list.length==3">
						<a href="#" class="r_item">
							<h3 class="r_title">{{item.title}}</h3>
							<ul class="r_img">
								<li v-for="img in (item.image_list)"><img :src="img.url" alt="" /></li>
							</ul>
							<div class="r_info">
								<span v-if="item.label" :class="{r_label:item.label=='置顶', r_label_b:item.label=='广告'}">{{item.label}}</span>
								<span class="r_label" v-if="item.hot==1">热</span>
								<span class="space">{{item.source}}</span>
								<span class="space">评论 {{item.comment_count}}</span>
								<span class="r_time space">11分钟前</span>
							</div>
	
						</a>
					</div>
					<!--一图-->
					<div v-else-if="item.image_url">
						<a href="#" class="r_item r_item2">
							<div class="ri_desc">
								<h3 class="r_title">{{item.title}}</h3>
								<div class="r_info">
									<span v-if="item.label" :class="{r_label:item.label=='置顶', r_label_b:item.label=='广告'}">{{item.label}}</span>
									<!--<span class="r_label">广告</span>-->
									<span class="r_label" v-if="item.hot==1">热</span>
									<span class="space">{{item.source}}</span>
									<span class="space">评论  {{item.comment_count}}</span>
									<!--<span class="r_time space">22分钟前</span>-->
								</div>
							</div>
							<div class="ri_pic">
								<img :src="item.image_url" />
							</div>
						</a>
					</div>
					<!--大图-->
					<div v-else-if="item.large_mode">
						<a href="#" class="r_item">
							<h3 class="r_title">{{item.title}}</h3>
							<div class="r_l_img">
								<img :src="item.large_image_url" />
							</div>
							<div class="r_info">
								<span v-if="item.label" :class="{r_label:item.label=='置顶', r_label_b:item.label=='广告'}">{{item.label}}</span>
								<span class="r_label" v-if="item.hot==1">热</span>
								<span class="space">{{item.source}}</span>
								<span class="space">评论  {{item.comment_count}}</span>
								<span class="r_time space">22分钟前</span>
							</div>
						</a>
					</div>
					<!--没图-->
					<div v-else>
						<a href="#" class="r_item">
							<h3 class="r_title">{{item.title}}</h3>
							<div class="r_info">
								<span v-if="item.label" :class="{r_label:item.label=='置顶', r_label_b:item.label=='广告'}">{{item.label}}</span>
								<span class="r_label" v-if="item.hot==1">热</span>
								<span class="space">{{item.source}}</span>
								<span class="space">评论 {{item.comment_count}}</span>
								<span class="r_time space">11分钟前</span>
							</div>
						</a>
					</div>
				</section>
				<!--视频-->
				<section class="v_list" v-else>
					<div class="v_item">
						<a href="#" class="v_conent">
							<h3 class="v_title">{{item.title}}</h3>
							<div class="v_pic">
								<img :src="item.large_image_url" />
								<div class="v_btn"></div>
							</div>
							<div class="v_info">
								<span class="gg_label" v-if="item.label=='广告'">广告</span>
								<span class="v_space">{{item.source}}</span>
								<span class="v_space">评论 {{item.comment_count}}</span>
								<span class="v_space">2小时前</span>
							</div>
						</a>
					</div>
				</section>
			</div>
		</mt-loadmore>
		<div :class="{load_tip:is,load_tipShow:load_tip}">
			为你推荐5篇文章
		</div>
		<p class="bot_load">{{$store.state.bot_load}}</p>
	</div>
</template>

<script>
	let timer;
	import axios from 'axios'
	export default {
		mounted() {
			this._getNews()
			//console.log(this.newList)
			//console.log([document.body])

		},
		data() {
			return {
				newList: [],
				scrollMode: "touch",
			}
		},
		computed: {
			video: function() {
				return this.$route.query.name
			},
			load_tip(){
				return this.$store.state.load_tip
			},
			is(){
				return this.$store.state.is
			}

		},
		methods: {
			loadTop() {
				this.$store.state.load_resh=true;
				var that=this
				this.$store.commit('pull_road',{
					url:this.$route.query.url
				})
				setTimeout(function(){
					that.$refs.loadmore.onTopLoaded()
				},1000)
			},
			loadBottom() {},
			_getNews() {
				let _this = this
				window.addEventListener("scroll", function(e) {
					let s_top = e.target.scrollingElement.scrollTop
					let s_heigth = e.target.scrollingElement.scrollHeight
					let s_bot = Math.floor((s_heigth - s_top) / s_heigth * 10)
					let id = _this.$route.query.id
					let num = _this.$store.state.items[id].a_number
					_this.$store.state.bot_load='正在努力加载中......'
					if(timer){
						clearTimeout(timer)
					}
					timer = setTimeout(function() {
						if(s_bot <= 4 && num <= 2) {
							//console.log(_this.$route.query.name)
							var ad = _this.$route.query.url;
							_this.$store.commit('_pushNews', {
								a: ad,
								n: num,
								name: _this.$route.query.name
							})
							_this.$store.commit('add', id)
						}else{
							_this.$store.state.bot_load='已全部加载完成'
						}
					}, 777)
					_this.$store.commit('s_topChange', {
						index: id,
						top: s_top
					})

				})

			},
		}

	}
</script>

<style lang="scss">
	@import "~scss/recommend";
	.recommend {
		width: 100%;
		padding: 0 r(30px) 0 !important;
		box-sizing: border-box;
		overflow-x: hidden;
	}
	/*video*/
	
	.recommend {
		text-align: left;
		.v_list {
			width: 100%;
			.v_item {
				padding: r(32px) 0;
				border-bottom: 1px solid rgba(221, 221, 221, 0.6);
				width: 100%;
				.v_conent {
					display: block;
					position: relative;
					margin-top: r(12px);
					width: 100%;
					.v_title {
						position: absolute;
						left: 0;
						top: 0;
						font-weight: 400;
						color: #fff;
						margin: r(10px) r(20px);
						font-size: r(28px);
						overflow: hidden;
						text-overflow: ellipsis;
						line-height: r(42px);
					}
					.v_pic {
						height: r(387.8px);
						img {
							width: 100%;
							height: 100%;
							display: block;
						}
						.v_btn {
							position: absolute;
							width: 100%;
							height: 100%;
							left: 0;
							top: 0;
							background: url(~img/v_btn.png) no-repeat center center;
							background-size: r(100px);
						}
					}
					.v_info {
						margin-top: r(12px);
						.v_space {
							margin-right: r(10px);
							line-height: r(24px);
							font-size: r(20px);
							vertical-align: middle;
							display: inline-block;
							color: #999;
						}
						.gg_label {
							display: inline-block;
							margin-right: r(10px);
							width: r(50px);
							line-height: r(24px);
							vertical-align: middle;
							color: #2a90d7;
							border: 1px solid rgba(42, 144, 215, 0.5);
							border-radius: r(4px);
							text-align: center;
							font-size: r(18px);
						}
					}
				}
			}
		}
	}
	
	.load {
		padding-top: r(160px) !important;
	}
</style>